import React, { useState, useRef } from 'react'

const Video = () => {
    const videoRef = useRef<HTMLVideoElement>(null)

    // 在组件挂载后设置视频属性
    React.useEffect(() => {
        if (videoRef.current) {
            videoRef.current.src = "https://vod.pipi.cn/fec9203cvodtransbj1251246104/ccff07ce5285890807898977876/v.f42906.mp4";//可以替换视频
        }
    }, [])
    return (
        <div>
            <video
                ref={videoRef}
                className='home-middle-video'
                style={{ width: "800px", height: "420px" }}
                controls
                id="videoElement"
            ></video>
        </div>
    )
}

export default Video









// import React, { useState, useEffect, useRef } from 'react';
// import './Home.css';
// import Spmx from '../Spmx/Spmx';
// import LinDang from '../../assets/img/notice.gif';
// import Yy from '../../assets/img/speaking.jpeg';
// import Yy1 from '../../assets/img/speeching.gif';
// import TB1 from '../../assets/img/answer-model.svg';
// import TB11 from '../../assets/img/answer-icon.svg';
// import Xx from '../../assets/img/chat-model.svg';
// import Xx1 from '../../assets/img/chat-model-active.svg';
// import TA from '../../assets/img/indexLightBackground.png';
// import TB from '../../assets/img/bg-day.png';
// import qhh from '../../assets/img/day-model.svg';
// import qhh1 from '../../assets/img/night-model.svg';
// import Video from '../Video/Video';

// // 定义语言包
// const languagePack = {
//     en: {
//         switchLanguage: 'Switch Language',
//         callPrompt: 'Call "Xiaowei Xiaowei" to start a new conversation',
//         switchTheme: 'Switch Theme'
//     },
//     zh: {
//         switchLanguage: '切换语言',
//         callPrompt: '呼唤"小维小维",开始新一轮对话',
//         switchTheme: '切换主题'
//     }
// };
// // 定义语言类型
// type Language = 'en' | 'zh';

// // 定义弹幕组件
// const Danmaku: React.FC<{ text: string; top: number }> = ({ text, top }) => {
//     const danmakuRef = useRef<HTMLDivElement>(null);

//     useEffect(() => {
//         const danmaku = danmakuRef.current;
//         if (danmaku) {
//             const screenWidth = window.innerWidth;
//             const danmakuWidth = danmaku.offsetWidth;
//             const duration = (screenWidth + danmakuWidth) / 100;
//             danmaku.style.animationDuration = `${duration}s`;
//         }
//     }, [text]);

//     return (
//         <div
//             ref={danmakuRef}
//             className="danmaku"
//             style={{ top: `${top}px` }}
//         >
//             {text}
//         </div>
//     );
// };

// const Home = () => {
//     // 控制主题切换
//     const [theme, setTheme] = useState(true);
//     // 控制语音模块切换
//     const [yya, setYya] = useState(true);
//     const [bxone, setBxone] = useState(true);
//     const [xx, setXx] = useState(true);
//     const [ayqh, setAyqh] = useState(true);
//     // 控制语言切换
//     const [currentLanguage, setCurrentLanguage] = useState<Language>('en');
//     // 管理弹幕列表
//     const [danmakus, setDanmakus] = useState<string[]>([]);

//     // 生成随机的垂直位置
//     const getRandomTop = () => {
//         return Math.floor(Math.random() * (window.innerHeight - 30));
//     };

//     // 定义主题切换事件
//     const qh = () => {
//         setTheme(!theme);
//     };
//     // 控制语音模块切换
//     const Yn = () => {
//         setYya(!yya);
//     };
//     const Djbo = () => {
//         setBxone(!bxone);
//     };
//     const DjbT = () => {
//         setXx(!xx);
//     };
//     const DjbTT = () => {
//         setAyqh(!ayqh);
//     };
//     // 切换语言的函数
//     const switchLanguage = () => {
//         setCurrentLanguage(currentLanguage === 'en' ? 'zh' : 'en');
//     };

//     // 获取当前语言对应的语言包内容
//     const currentPack = languagePack[currentLanguage];

//     // 定时生成弹幕
//     useEffect(() => {
//         const interval = setInterval(() => {
//             const sampleDanmakus = [
//                 '这是一条弹幕！',
//                 'Hello, World!',
//                 '小维很厉害哦',
//                 '有趣的弹幕来了'
//             ];
//             const randomDanmaku = sampleDanmakus[Math.floor(Math.random() * sampleDanmakus.length)];
//             setDanmakus([...danmakus, randomDanmaku]);
//         }, 3000);

//         return () => clearInterval(interval);
//     }, [danmakus]);

//     // 移除移出屏幕的弹幕
//     useEffect(() => {
//         const interval = setInterval(() => {
//             setDanmakus((prevDanmakus) => {
//                 return prevDanmakus.slice(-10);
//             });
//         }, 5000);

//         return () => clearInterval(interval);
//     }, []);

//     return (
//         <div className='home'>
//             <div className='home-top'></div>
//             {/* 主题切换按钮 */}
//             <div className='home-content'>
//                 <img className='home-img' src={theme ? TA : TB} alt="" />
//             </div>

//             {/* 视频播放模块 */}
//             <div className='home-middle'>
//                 <Video />
//             </div>
//             {/* 小维 */}
//             <div className='home-r-s'>
//                 <p className='home-r-p'>{currentPack.callPrompt}</p>
//             </div>
//             <div className='home-r-img'>
//                 <img className='home-imgs' src={LinDang} alt="" />
//             </div>
//             {/* 语音 */}
//             <div className='home-bottom'>
//                 <img className='home-bottom-img' onClick={Yn} src={yya ? Yy : Yy1} alt="" />
//             </div>
//             {/* 三个按钮 */}
//             <>
//                 <div className='bottom-x'>
//                     <img className='bottom-x1' onClick={Djbo} src={bxone ? TB1 : TB11} alt="" />
//                 </div>
//                 <div className='bottom-xx'>
//                     <img className='bottom-x2' onClick={DjbT} src={xx ? Xx : Xx1} alt="" />
//                 </div>
//                 <div className='bottom-xxx'>
//                     <img className='bottom-x3' onClick={DjbTT} src={ayqh ? qhh : qhh1} alt="" />
//                 </div>
//             </>

//             {/* 模型 */}
//             <div className='home-leftr'>
//                 <Spmx />
//             </div>

//             <div className='home-Language'>
//                 {/* 语言切换按钮 */}
//                 <button onClick={switchLanguage}>{currentPack.switchLanguage}</button>
//             </div>
//             {/* 切换主题按钮 */}
//             <button className='home-btn' onClick={qh}>{currentPack.switchTheme}</button>

//             {/* 弹幕容器 */}
//             <div className="danmaku-container">
//                 {danmakus.map((danmaku, index) => (
//                     <Danmaku key={index} text={danmaku} top={getRandomTop()} />
//                 ))}
//             </div>
//         </div>
//     );
// }

// export default Home;